<template>
  <div>
    <!-- 设置头部 -->
    <div class="settings-header">
      <div class="settings-back">
        <a href="#" class="back-button" @click="goBack">
          <svg t="1742876602916" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="3194" width="20" height="20">
            <path
              d="M277.382 553.022c-23.136-22.633-23.113-59.378 0.024-82.035l383.961-421.98c23.16-22.657 60.65-22.68 83.786-0.048 23.112 22.657 23.088 59.378-0.048 82.058l-347.407 381.779 346.713 381.035c23.16 22.681 23.401 59.186 0.576 81.555-22.825 22.368-60.122 22.104-83.258-0.553l-383.052-420.97c-0.382-0.361-0.91-0.457-1.294-0.84z"
              fill="#1296db" p-id="3195"></path>
          </svg>
        </a>
      </div>
      <div class="settings-title">设置</div>
      <div style="width: 24px;"></div> <!-- 占位，保持标题居中 -->
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <!-- 账户设置 -->
      <div class="settings-section">
        <div class="settings-section-header">账户设置</div>

        <div class="settings-item">
          <div class="settings-item-icon">
            <svg t="1742876982522" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="4582" width="20" height="20">
              <path
                d="M535.6 511.8c95.1-10.5 172.1-87.5 182.6-182.6C732 204 634.4 98.2 512 98.2c-114.6 0-207.5 92.8-207.5 207.4v0.1c0 122.4 105.9 219.9 231.1 206.1zM512 572.4c-138.5 0-415 79.4-415 237.1v88.9c0 16.4 13.3 29.6 29.6 29.6h770.7c16.4 0 29.6-13.3 29.6-29.6v-88.9C927 651.9 650.5 572.4 512 572.4z"
                p-id="4583" fill="#1296db"></path>
            </svg>
          </div>
          <div class="settings-item-content">
            <div class="settings-item-title">个人资料</div>
          </div>
          <div class="settings-item-chevron">
            <svg t="1742836444128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="1463" width="16" height="16">
              <path d="M369.5 980.9l-81.8-73.6 354.4-393.8-375-394.7L346.9 43l445 468.5z" p-id="1464" fill="#bfbfbf">
              </path>
            </svg>
          </div>
        </div>

        <div class="settings-item">
          <div class="settings-item-icon">
            <svg t="1742877171648" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="5715" width="20" height="20">
              <path
                d="M765.604952 364.063693l-42.267663 0 0-84.535325c0-116.65793-94.679359-211.337289-211.337289-211.337289s-211.337289 94.679359-211.337289 211.337289l0 84.535325-42.267663 0c-46.705742 0-84.535325 37.829584-84.535325 84.535325l0 422.674579c0 46.705742 37.829584 84.535325 84.535325 84.535325l507.209904 0c46.705742 0 84.535325-37.829584 84.535325-84.535325L850.140277 448.599018C850.140277 401.893276 812.310693 364.063693 765.604952 364.063693zM512 744.470609c-46.705742 0-84.535325-37.829584-84.535325-84.535325 0-46.705742 37.829584-84.535325 84.535325-84.535325s84.535325 37.829584 84.535325 84.535325C596.534302 706.642049 558.705742 744.470609 512 744.470609zM643.029242 364.063693 380.970758 364.063693l0-84.535325c0-72.27714 58.752102-131.029242 131.029242-131.029242S643.029242 207.251228 643.029242 279.528368L643.029242 364.063693z"
                p-id="5716" fill="#1296db"></path>
            </svg>
          </div>
          <div class="settings-item-content">
            <div class="settings-item-title">账户安全</div>
          </div>
          <div class="settings-item-chevron">
            <svg t="1742836444128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="1463" width="16" height="16">
              <path d="M369.5 980.9l-81.8-73.6 354.4-393.8-375-394.7L346.9 43l445 468.5z" p-id="1464" fill="#bfbfbf">
              </path>
            </svg>
          </div>
        </div>

        <div class="settings-item">
          <div class="settings-item-icon">
            <svg t="1742877222709" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="6869" width="20" height="20">
              <path
                d="M847 733.1l-77.5-154.8c-0.8-1.7-1.3-3.5-1.3-5.4l-0.2-171.4c-0.1-96.7-65.6-178.1-154.5-202.4v-0.1c0-55.6-45.1-100.7-100.7-100.7-55.5 0-100.5 44.9-100.7 100.4C322.2 222.6 255.9 304.6 256 402l0.2 171.4c0 1.9-0.4 3.7-1.3 5.4l-77.4 154.6c-22.6 45.2 10.3 98.5 60.9 98.4l547.9-0.4c50.5 0.1 83.4-53.1 60.7-98.3zM421.5 860.8c-10.1 0-15.6 11.7-9.3 19.6 23.4 29.2 59.4 47.9 99.7 47.9 40.4 0 76.4-18.7 99.9-48 6.3-7.9 0.8-19.6-9.3-19.5h-181z"
                p-id="6870" fill="#1296db"></path>
            </svg>
          </div>
          <div class="settings-item-content">
            <div class="settings-item-title">通知设置</div>
          </div>
          <div class="settings-item-chevron">
            <svg t="1742836444128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="1463" width="16" height="16">
              <path d="M369.5 980.9l-81.8-73.6 354.4-393.8-375-394.7L346.9 43l445 468.5z" p-id="1464" fill="#bfbfbf">
              </path>
            </svg>
          </div>
        </div>
      </div>

      <!-- 通用设置 -->
      <div class="settings-section">
        <div class="settings-section-header">通用设置</div>

        <div class="settings-item">
          <div class="settings-item-icon">
            <svg t="1742877257857" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="8066" width="20" height="20">
              <path
                d="M988.968421 512c0-264.084211-212.884211-476.968421-476.968421-476.968421C247.915789 35.031579 35.031579 247.915789 35.031579 512c0 261.389474 212.884211 476.968421 474.273684 476.968421h5.389474c261.389474 0 474.273684-215.578947 474.273684-476.968421zM167.073684 781.473684c-53.894737-70.063158-88.926316-156.294737-94.315789-250.610526h212.88421c0 43.115789 5.389474 115.873684 24.252632 188.631579-56.589474 13.473684-110.484211 32.336842-142.821053 61.978947zM164.378947 242.526316c32.336842 29.642105 86.231579 51.2 145.51579 64.673684-16.168421 72.757895-21.557895 142.821053-21.557895 185.936842H75.452632c2.694737-94.315789 35.031579-180.547368 88.926315-250.610526z m695.242106 0c53.894737 70.063158 86.231579 156.294737 91.621052 250.610526h-212.88421c0-43.115789-5.389474-113.178947-24.252632-185.936842 59.284211-13.473684 113.178947-35.031579 145.51579-64.673684zM700.631579 493.136842h-169.768421v-167.073684c43.115789 0 94.315789-5.389474 145.515789-13.473684 18.863158 72.757895 21.557895 142.821053 24.252632 180.547368z m-169.768421-204.8V83.536842c70.063158 37.726316 110.484211 115.873684 134.736842 194.021053-45.810526 8.084211-94.315789 10.778947-134.736842 10.778947z m-37.726316-204.8v204.8c-40.421053 0-88.926316-5.389474-134.736842-10.778947 21.557895-78.147368 64.673684-153.6 134.736842-194.021053z m0 242.526316v167.073684H323.368421c0-37.726316 5.389474-107.789474 24.252632-177.852631 53.894737 8.084211 107.789474 10.778947 145.515789 10.778947zM323.368421 530.863158h169.768421V700.631579c-37.726316 0-88.926316 2.694737-145.515789 13.473684-18.863158-75.452632-21.557895-145.515789-24.252632-183.242105z m169.768421 207.494737v202.105263c-70.063158-37.726316-110.484211-113.178947-134.736842-191.326316 45.810526-8.084211 94.315789-10.778947 134.736842-10.778947z m37.726316 202.105263v-202.105263c40.421053 0 88.926316 5.389474 134.736842 13.473684-24.252632 75.452632-64.673684 150.905263-134.736842 188.631579z m0-239.831579v-169.768421H700.631579c0 37.726316-5.389474 107.789474-24.252632 183.242105-51.2-8.084211-105.094737-13.473684-145.515789-13.473684z m207.494737-169.768421h212.88421c-5.389474 94.315789-37.726316 180.547368-94.315789 250.610526-32.336842-29.642105-86.231579-48.505263-142.821053-61.978947 16.168421-72.757895 21.557895-145.515789 24.252632-188.631579zM835.368421 215.578947c-26.947368 24.252632-75.452632 43.115789-129.347368 53.894737-21.557895-70.063158-56.589474-140.126316-113.178948-188.631579 94.315789 16.168421 177.852632 64.673684 242.526316 134.736842zM431.157895 80.842105c-56.589474 48.505263-91.621053 118.568421-113.178948 191.326316C264.084211 258.694737 215.578947 239.831579 188.631579 215.578947c64.673684-70.063158 148.210526-118.568421 242.526316-134.736842zM191.326316 811.115789c26.947368-24.252632 75.452632-43.115789 129.347368-53.894736 21.557895 70.063158 56.589474 140.126316 110.484211 185.936842-94.315789-16.168421-177.852632-64.673684-239.831579-132.042106zM592.842105 943.157895c56.589474-48.505263 88.926316-115.873684 110.484211-185.936842 53.894737 10.778947 102.4 29.642105 129.347368 53.894736-61.978947 67.368421-145.515789 115.873684-239.831579 132.042106z"
                fill="#1296db" p-id="8067"></path>
            </svg>
          </div>
          <div class="settings-item-content">
            <div class="settings-item-title">语言</div>
          </div>
          <div class="settings-item-value">简体中文</div>
          <div class="settings-item-chevron">
            <svg t="1742836444128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="1463" width="16" height="16">
              <path d="M369.5 980.9l-81.8-73.6 354.4-393.8-375-394.7L346.9 43l445 468.5z" p-id="1464" fill="#bfbfbf">
              </path>
            </svg>
          </div>
        </div>

        <div class="settings-item">
          <div class="settings-item-icon">
            <svg t="1742877279326" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="9200" width="20" height="20">
              <path
                d="M792.864 922.112l103.584-2.176L572.576 110.24h-89.184L161.696 919.936H264l66.944-167.936h394.112l67.808 170.112zM369.216 656L528 257.632 686.784 656h-317.568z"
                p-id="9201" fill="#1296db"></path>
            </svg>
          </div>
          <div class="settings-item-content">
            <div class="settings-item-title">字体大小</div>
          </div>
          <div class="settings-item-value">中</div>
          <div class="settings-item-chevron">
            <svg t="1742836444128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="1463" width="16" height="16">
              <path d="M369.5 980.9l-81.8-73.6 354.4-393.8-375-394.7L346.9 43l445 468.5z" p-id="1464" fill="#bfbfbf">
              </path>
            </svg>
          </div>
        </div>

        <div class="settings-item">
          <div class="settings-item-icon">
            <svg t="1742877345234" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="10392" width="20" height="20">
              <path
                d="M512 85.333333l10.709333 0.213334a12.288 12.288 0 0 1 9.429334 19.370666c-22.656 31.914667-36.48 53.76-41.514667 65.621334a277.333333 277.333333 0 0 0 350.250667 367.701333l11.776-4.522667c15.701333-6.528 35.370667-18.346667 59.008-35.498666A17.024 17.024 0 0 1 938.666667 512c0 9.6-0.298667 19.157333-0.938667 28.586667l-1.152 14.08-0.853333 7.68-1.706667 12.885333C903.466667 780.885333 726.144 938.666667 512 938.666667 276.352 938.666667 85.333333 747.648 85.333333 512c0-210.218667 152.064-384.938667 352.170667-420.181333l14.378667-2.261334 10.112-1.322666 7.338666-0.810667c14.037333-1.365333 28.245333-2.090667 42.666667-2.090667zM394.24 191.530667l-7.125333 2.688A341.461333 341.461333 0 0 0 512 853.333333a341.461333 341.461333 0 0 0 320.469333-223.616A362.666667 362.666667 0 0 1 394.24 191.530667z"
                fill="#1296db" p-id="10393"></path>
            </svg>
          </div>
          <div class="settings-item-content">
            <div class="settings-item-title">深色模式</div>
          </div>
          <label class="settings-switch">
            <input type="checkbox" />
            <span class="settings-slider"></span>
          </label>
        </div>

        <div class="settings-item">
          <div class="settings-item-icon">
            <svg t="1742877372068" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="11566" width="20" height="20">
              <path
                d="M926.634667 294.912a32 32 0 1 1-39.936 50.005333C780.512 260.128 649.824 213.333333 512.053333 213.333333c-137.813333 0-268.544 46.826667-374.752 131.669334a32 32 0 1 1-39.936-50.005334C214.784 201.194667 359.562667 149.333333 512.053333 149.333333c152.437333 0 297.173333 51.818667 414.581334 145.578667z m-235.413334 298.133333a32 32 0 0 1-38.442666 51.178667A233.418667 233.418667 0 0 0 512.021333 597.333333c-51.541333 0-100.48 16.629333-140.8 46.912a32 32 0 1 1-38.442666-51.157333A297.408 297.408 0 0 1 512.021333 533.333333c65.504 0 127.893333 21.184 179.2 59.722667z m128-149.344a32 32 0 0 1-38.442666 51.168C703.829333 437.066667 610.378667 405.333333 512.032 405.333333c-98.368 0-191.850667 31.754667-268.8 89.578667a32 32 0 1 1-38.453333-51.157333C292.736 377.664 399.669333 341.333333 512.032 341.333333c112.32 0 219.242667 36.309333 307.189333 102.368zM512 853.333333a64 64 0 1 1 0-128 64 64 0 0 1 0 128z"
                fill="#1296db" p-id="11567"></path>
            </svg>
          </div>
          <div class="settings-item-content">
            <div class="settings-item-title">仅在WIFI下加载图片</div>
            <div class="settings-item-subtitle">节省流量，减少等待时间</div>
          </div>
          <label class="settings-switch">
            <input type="checkbox" checked />
            <span class="settings-slider"></span>
          </label>
        </div>
      </div>

      <!-- 隐私设置 -->
      <div class="settings-section">
        <div class="settings-section-header">隐私设置</div>

        <div class="settings-item">
          <div class="settings-item-icon">
            <svg t="1742877400280" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="12696" width="20" height="20">
              <path
                d="M512 318c-58.9 0-106.7 47.8-106.7 106.7 0 43.7 26.4 81.2 64 97.7v137c0 23.6 19.1 42.7 42.7 42.7s42.7-19.1 42.7-42.7v-137c37.6-16.5 64-53.9 64-97.7 0-58.9-47.8-106.7-106.7-106.7z"
                fill="#1296db" p-id="12697"></path>
              <path
                d="M843.9 199.5L553.8 55.4c-26.1-13-57.4-13-83.5 0L180.1 199.5c-32.1 16-52.1 48.2-52.1 84.1v263.5c0 121.2 59 236.3 161.9 315.5 74.4 57.2 200.4 110.1 205.7 112.4 5.3 2.2 10.9 3.3 16.4 3.3 5.6 0 11.2-1.1 16.4-3.3 5.3-2.2 131.3-55.1 205.7-112.4C837 783.4 896 668.4 896 547.1V283.6c0-35.9-20-68.1-52.1-84.1z m-33.2 347.6c0 94.6-46.9 184.9-128.6 247.9-50.9 39.2-134.8 78.4-170.1 94.1-35.2-15.7-119-54.8-170-94.1-81.7-63-128.6-153.4-128.6-247.9V283.6c0-3.2 1.9-6.2 4.7-7.6l290.1-144.1c2.4-1.2 5.2-1.2 7.6 0L805.9 276c2.9 1.4 4.7 4.4 4.7 7.6v263.5z"
                fill="#1296db" p-id="12698"></path>
            </svg>
          </div>
          <div class="settings-item-content">
            <div class="settings-item-title">隐私政策</div>
          </div>
          <div class="settings-item-chevron">
            <svg t="1742836444128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="1463" width="16" height="16">
              <path d="M369.5 980.9l-81.8-73.6 354.4-393.8-375-394.7L346.9 43l445 468.5z" p-id="1464" fill="#bfbfbf">
              </path>
            </svg>
          </div>
        </div>

        <div class="settings-item">
          <div class="settings-item-icon">
            <svg t="1742877452300" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="15359" width="20" height="20">
              <path
                d="M494.4 34c-44.2-6.2-89.2 1.8-128.8 22.8l-148 79c-39.4 21-71.2 54-90.8 94.2l-73.4 151.2c-19.6 40.2-26 85.8-18.2 129.8l29 165.6c7.8 44.2 29.2 84.6 61.4 115.8l120.6 116.8c32.2 31.2 73.2 51.2 117.4 57.4l166 23.4c44.2 6.2 89.2-1.8 128.8-22.8l148-79c39.4-21 71.2-54 90.8-94.4l73.4-151c19.6-40.2 26-85.8 18.2-129.8l-29.2-165.6c-7.8-44.2-29.2-84.6-61.4-115.8l-120.4-116.6c-32.2-31.2-73.2-51.2-117.4-57.4l-166-23.6zM416 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z m-128 384a64 64 0 1 1 128 0 64 64 0 1 1-128 0z m448-128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"
                p-id="15360" fill="#1296db"></path>
            </svg>
          </div>
          <div class="settings-item-content">
            <div class="settings-item-title">Cookie设置</div>
          </div>
          <div class="settings-item-chevron">
            <svg t="1742836444128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="1463" width="16" height="16">
              <path d="M369.5 980.9l-81.8-73.6 354.4-393.8-375-394.7L346.9 43l445 468.5z" p-id="1464" fill="#bfbfbf">
              </path>
            </svg>
          </div>
        </div>

        <div class="settings-item">
          <div class="settings-item-icon">
            <svg t="1742877479210" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="16526" width="25" height="25">
              <path
                d="M469.333333 554.666667l128 128 59.733334-59.733334-102.4-102.4V341.333333h-85.333334v213.333334zM85.333333 256l149.333334 149.333333 29.866666 29.866667C298.666667 332.8 396.8 256 512 256c140.8 0 256 115.2 256 256s-115.2 256-256 256c-128 0-234.666667-93.866667-251.733333-217.6l-85.333334-85.333333c-4.266667 17.066667-4.266667 29.866667-4.266666 46.933333 0 187.733333 153.6 341.333333 341.333333 341.333333s341.333333-153.6 341.333333-341.333333-153.6-341.333333-341.333333-341.333333C405.333333 170.666667 311.466667 221.866667 247.466667 298.666667l-42.666667-42.666667H85.333333z"
                fill="#1296db" p-id="16527"></path>
            </svg>
          </div>
          <div class="settings-item-content">
            <div class="settings-item-title">清除浏览历史</div>
          </div>
          <div class="settings-item-chevron">
            <svg t="1742836444128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="1463" width="16" height="16">
              <path d="M369.5 980.9l-81.8-73.6 354.4-393.8-375-394.7L346.9 43l445 468.5z" p-id="1464" fill="#bfbfbf">
              </path>
            </svg>
          </div>
        </div>

        <div class="settings-item">
          <div class="settings-item-icon">
            <svg t="1742877524966" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="17784" width="20" height="20">
              <path
                d="M731.546 588.952C782.032 501.857 806 432.632 806 384c0-162.372-131.628-294-294-294S218 221.628 218 384c0 48.633 23.968 117.857 74.454 204.952C341.914 674.28 415.131 773.963 512 887.432c96.869-113.469 170.085-213.153 219.546-298.48zM549.64 981.52a50 50 0 0 1-4.727 4.727c-20.788 18.177-52.375 16.06-70.553-4.727C243.453 717.45 128 518.277 128 384 128 171.923 299.923 0 512 0s384 171.923 384 384c0 134.277-115.453 333.45-346.36 597.519zM512 544c88.366 0 160-71.634 160-160s-71.634-160-160-160-160 71.634-160 160 71.634 160 160 160z m0-90c-38.66 0-70-31.34-70-70s31.34-70 70-70 70 31.34 70 70-31.34 70-70 70z"
                p-id="17785" fill="#1296db"></path>
            </svg>
          </div>
          <div class="settings-item-content">
            <div class="settings-item-title">位置服务</div>
            <div class="settings-item-subtitle">用于推荐本地新闻</div>
          </div>
          <label class="settings-switch">
            <input type="checkbox" checked />
            <span class="settings-slider"></span>
          </label>
        </div>
      </div>

      <!-- 关于 -->
      <div class="settings-section">
        <div class="settings-section-header">关于</div>

        <div class="settings-item">
          <div class="settings-item-icon">
            <svg t="1742877580470" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="20101" width="20" height="20">
              <path
                d="M512 64c247.424 0 448 200.576 448 448s-200.576 448-448 448S64 759.424 64 512 264.576 64 512 64z m0 85.333333C311.701333 149.333333 149.333333 311.701333 149.333333 512s162.368 362.666667 362.666667 362.666667 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333z m21.333333 277.333334a21.333333 21.333333 0 0 1 21.333334 21.333333v298.666667a21.333333 21.333333 0 0 1-21.333334 21.333333h-42.666666a21.333333 21.333333 0 0 1-21.333334-21.333333V448a21.333333 21.333333 0 0 1 21.333334-21.333333h42.666666z m0-170.666667a21.333333 21.333333 0 0 1 21.333334 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333334 21.333333h-42.666666a21.333333 21.333333 0 0 1-21.333334-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333334-21.333333h42.666666z"
                fill="#1296db" p-id="20102"></path>
            </svg>
          </div>
          <div class="settings-item-content">
            <div class="settings-item-title">关于我们</div>
          </div>
          <div class="settings-item-chevron">
            <svg t="1742836444128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="1463" width="16" height="16">
              <path d="M369.5 980.9l-81.8-73.6 354.4-393.8-375-394.7L346.9 43l445 468.5z" p-id="1464" fill="#bfbfbf">
              </path>
            </svg>
          </div>
        </div>

        <div class="settings-item">
          <div class="settings-item-icon">
            <svg t="1742877609085" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="21219" width="20" height="20">
              <path
                d="M512.73613 151.4l103 208.7c11.7 23.6 34.2 40 60.2 43.8l230.3 33.5-166.6 162.4c-18.9 18.4-27.5 44.9-23 70.8L755.93613 900l-206-108.3c-11.4-6-24.3-9.2-37.2-9.2-12.9 0-25.8 3.2-37.2 9.2L269.53613 900l39.3-229.4c4.5-26-4.2-52.4-23-70.8L119.23613 437.3l230.3-33.5c26.1-3.8 48.6-20.1 60.2-43.8l103-208.6M512.73613 27c-5.7 0-11.4 3-14.3 8.9l-146 295.9c-2.3 4.7-6.8 8-12 8.8L13.73613 388c-13.1 1.9-18.4 18-8.9 27.3l236.3 230.3c3.8 3.7 5.5 9 4.6 14.2L190.03613 985c-1.8 10.3 6.4 18.7 15.8 18.7 2.5 0 5-0.6 7.4-1.9l292.1-153.5c2.3-1.2 4.9-1.8 7.4-1.8s5.1 0.6 7.4 1.8l292.1 153.5c2.5 1.3 5 1.9 7.4 1.9 9.3 0 17.5-8.4 15.8-18.7l-55.8-325.2c-0.9-5.2 0.8-10.5 4.6-14.2l236.3-230.3c9.5-9.3 4.3-25.4-8.9-27.3l-326.5-47.4c-5.2-0.8-9.7-4-12-8.8l-146-295.9c-3-6-8.7-8.9-14.4-8.9z"
                p-id="21220" fill="#1296db"></path>
            </svg>
          </div>
          <div class="settings-item-content">
            <div class="settings-item-title">给我们评分</div>
          </div>
          <div class="settings-item-chevron">
            <svg t="1742836444128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="1463" width="16" height="16">
              <path d="M369.5 980.9l-81.8-73.6 354.4-393.8-375-394.7L346.9 43l445 468.5z" p-id="1464" fill="#bfbfbf">
              </path>
            </svg>
          </div>
        </div>

        <div class="settings-item">
          <div class="settings-item-icon">
            <svg t="1742877659398" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="22547" width="20" height="20">
              <path
                d="M837.418667 776.746667C756.522667 877.653333 637.653333 938.666667 508.714667 938.666667 304.896 938.666667 129.834667 786.432 85.333333 575.317333L170.026667 554.666667c35.584 168.746667 175.658667 290.56 338.688 290.56 106.069333 0 203.562667-51.626667 268.373333-136.362667L682.666667 602.666667h256v288l-101.248-113.92zM186.581333 247.253333C267.477333 146.346667 386.346667 85.333333 515.285333 85.333333c203.818667 0 378.88 152.234667 423.381334 363.349334L853.973333 469.333333c-35.584-168.746667-175.658667-290.56-338.688-290.56-106.069333 0-203.562667 51.626667-268.373333 136.362667L341.333333 421.333333H85.333333v-288l101.248 113.92z"
                fill="#1296db" p-id="22548"></path>
            </svg>
          </div>
          <div class="settings-item-content">
            <div class="settings-item-title">检查更新</div>
          </div>
          <div class="settings-item-value">v1.0.0</div>
          <div class="settings-item-chevron">
            <svg t="1742836444128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="1463" width="16" height="16">
              <path d="M369.5 980.9l-81.8-73.6 354.4-393.8-375-394.7L346.9 43l445 468.5z" p-id="1464" fill="#bfbfbf">
              </path>
            </svg>
          </div>
        </div>
      </div>

      <div class="settings-footer">
        © 2025 万象新讯 版权所有
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 方法定义
const goBack = () => {
  window.history.back();
};

// 开关切换事件
const handleSwitchChange = (event) => {
  const settingName = event.target.closest('.settings-item').querySelector('.settings-item-title').textContent;
  console.log(`${settingName} 设置已${event.target.checked ? '开启' : '关闭'}`);
};

// 点击设置项
const handleSettingsItem = (event) => {
  const settingName = event.target.querySelector('.settings-item-title').textContent;
  alert(`${settingName} 设置页面正在开发中`);
};
</script>


<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f7;
  color: #333;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  background-color: #f5f5f7;
  position: sticky;
  top: 0;
  z-index: 100;
}

.status-bar-time {
  font-size: 16px;
  color: #333;
}

.status-bar-icons {
  display: flex;
  gap: 12px;
}

.settings-header {
  padding: 16px;
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  align-items: center;
}

.settings-title {
  font-size: 18px;
  font-weight: 600;
  flex: 1;
  text-align: center;
}

.settings-back {
  font-size: 18px;
  color: #007aff;
  display: flex;
  align-items: center;
}

.content {
  max-width: 100%;
  margin: 0 auto;
  padding: 16px 16px 0px;
}

.settings-section {
  margin-bottom: 16px;
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.settings-section-header {
  padding: 12px 16px;
  color: #8e8e93;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background-color: #f2f2f7;
}

.settings-item {
  display: flex;
  padding: 16px;
  border-bottom: 1px solid #eaeaea;
  align-items: center;
}

.settings-item:last-child {
  border-bottom: none;
}

.settings-item-icon {
  width: 24px;
  margin-right: 16px;
  color: #007aff;
  font-size: 18px;
  text-align: center;
  display: flex;
  align-items: center;
}

.settings-item-content {
  flex: 1;
}

.back-button {
  display: flex;
  align-items: center;
}

.settings-item-title {
  font-size: 16px;
}

.settings-item-subtitle {
  font-size: 14px;
  color: #8e8e93;
  margin-top: 4px;
}

.settings-item-value {
  color: #8e8e93;
  margin-right: 8px;
}

.settings-item-chevron {
  color: #c7c7cc;
}

.settings-switch {
  position: relative;
  display: inline-block;
  width: 51px;
  height: 31px;
}

.settings-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.settings-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e9e9eb;
  transition: .4s;
  border-radius: 34px;
}

.settings-slider:before {
  position: absolute;
  content: "";
  height: 27px;
  width: 27px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked+.settings-slider {
  background-color: #4cd964;
}

input:checked+.settings-slider:before {
  transform: translateX(20px);
}

.settings-footer {
  text-align: center;
  padding: 16px;
  color: #8e8e93;
  font-size: 12px;
}
</style>